<template>
    <div style="min-height: 540px;min-width: 960px">
        <div style="width: 240px;margin-top: 20px" class="detail_titie">
            <a-icon type="arrow-left" style="font-size: 24px;float: left;" @click="ToAdd"/>
            <p style="width: 80px;float:left;font-size:18px;margin-left: 10px">基本信息</p>
            <a-button type="primary" icon="redo" style="margin-top: -5px;margin-left: 40px" @click="getClientInfo">刷新</a-button>
        </div>
        <div style="position:absolute;width:960px;height: 80px;margin-top: 40px">
            <div style="width:240px;height: 40px;float: left;margin-left: 50px">
                <p style="height: 40px;width: 60px;float: left;">设备:</p>
                <p style="height: 40px;width: 80px;float: left;margin-left: 0px;color: #000;">{{data.username}}</p>
                <a href="javascript:;" style="margin-left: 10px" v-clipboard:copy="data.username"
                   v-clipboard:success="onCopy" v-clipboard:error="onError">复制</a>
            </div>
            <div style="width:240px;height: 40px;float: left">
                    <p style="height: 40px;width: 60px;float: left;">ProductKey:</p>
                    <p style="height: 40px;width: 100px;float: left;margin-left: 20px;color: #000;">{{data.clientid}}</p>
                    <a href="javascript:;" style="margin-left: 10px" v-clipboard:copy="data.clientid"
                       v-clipboard:success="onCopy" v-clipboard:error="onError">复制</a>
            </div>
            <div style="width:240px;height: 40px;float: left;margin-left: 40px">
                <p style="height: 40px;width: 60px;float: left;">DeviceSecret:</p>
                <p style="height: 40px;width: 100px;float: left;margin-left: 40px;color: #000;">{{data.password.substring(0,4)+
                    '****'+data.password.substring(10,14)}}</p>
                <a href="javascript:;" style="margin-left: 10px" @click="showModal">查看</a>
            </div>
        </div>
        <div style="margin-top: 80px;position:absolute;width: 100%">
            <a-card style="margin-top: 0px;width: 900px;" :bordered="false" title="设备信息">
                <MiniForm :tableData="tableData"/>
                <MiniForm :tableData="table2Data"/>
            </a-card>
        </div>
            <a-modal title="设备证书" v-model="visible" @ok="handleOk" cancelText="关闭" okText="一键复制">
            <table class="modal_mailTable" style="width: 100%">
                <tr >
                    <td class="column">ProductKey</td>
                    <td>{{data.clientid}}
                        <a href="javascript:;" style="margin-left: 10px" v-clipboard:copy="data.clientid"
                                       v-clipboard:success="onCopy" v-clipboard:error="onError">复制</a>
                    </td>
                </tr>
                <tr >
                    <td class="column">DeviceName</td>
                    <td>{{data.username}}
                        <a href="javascript:;" style="margin-left: 10px" v-clipboard:copy="data.username"
                                 v-clipboard:success="onCopy" v-clipboard:error="onError">复制</a>
                    </td>
                </tr>
                <tr >
                    <td class="column">DeviceSecret</td>
                    <td>{{data.password}}
                        <a href="javascript:;" style="margin-left: 10px" v-clipboard:copy="data.password"
                           v-clipboard:success="onCopy" v-clipboard:error="onError">复制</a></td>
                </tr>
            </table>
            <p>一机一密</p>
            <p>
                每个设备烧录其唯一的设备证书（ProductKey、DeviceName 和 DeviceSecret）。
                当设备与物联网平台建立连接时，物联网平台对其携带的设备证书信息进行认证</p>
        </a-modal>

    </div>
</template>

<script>
  import MiniForm from "@/components/forms/MiniForm";
  import {getNodeClientInfo} from '@/api/mqtt'


    export default {
        name: "DevDetail",
        components:{
           MiniForm
        },
        data(){
            return{
                visible: false,

                DeviceName:'',
                ProductKey:'',
                DeviceSecret:'',

                data:{},
                tableData: [
                    {key: '设备名称', value: '1001'},
                    {key: 'ProductKey', value: '篮球'},
                    {key: '节点类型', value: '120.00'},
                    {key: 'DeviceName', value: '2017-03-01'},
                ],
                table2Data: [
                    {key: '连接类型', value: '---'},
                    {key: '心跳（s）', value: '---'},
                    {key: '端口', value: '----'},
                    {key: 'MQTT协议版本', value: '---'},
                    {key: 'IP地址', value: '---'},
                    {key: '连接时间', value: '---'},
                ],

            }
        },created () {
            //console.log(this.$route.params.id)
            const key=sessionStorage.getItem('clientkey')
            let data=JSON.parse(sessionStorage.getItem('client'))
            this.data=data[key]
            this.ProductKey=data[key].clientid
            this.tableData=[
                {key: '设备名称', value: data[key].clientname},
                {key: 'ProductKey', value: data[key].clientid},
                {key: '节点类型', value: data[key].tags},
                {key: '设备创建时间', value: data[key].add_time},
            ]
            this.getClientInfo();


        },methods:{
            getClientInfo(){
                getNodeClientInfo(this.ProductKey).then((reponse)=>{
                    const  result=eval(reponse.data["data"][0])
                    console.log(result)
                    if(reponse.data["data"].length==1){
                        this.table2Data=[
                            {key: '连接类型', value: result["proto_name"]},
                            {key: '心跳（s）', value: result["keepalive"]},
                            {key: '端口', value: result["port"]},
                            {key: 'MQTT协议版本', value: result["proto_ver"]},
                            {key: 'IP地址', value: result["ipaddress"]},
                            {key: '连接时间', value: result["connected_at"]},
                        ]
                    }else{
                        this.$notification['info']({
                            message: '提示',
                            description:
                                '你的设备未连接，请启动设备连接成功后刷新本页面。',
                        });


                    }

                   // console.log(result  )
                }).catch()
            },
            ToAdd(){
                this.$router.replace({name:'Add'}).catch(err=>{err})
            },
            onCopy() {

                this.$message.success('复制成功！');
            },
            onError() {
                this.$message.error('复制失败');
            },
            showModal() {
                this.visible = true
            },
            handleOk() {
                    this.$copyText(this.data).then(function () {
                       // console.log(e)
                    }, function () {
                        //console.log(e)
                    })


            },


        }
    }
</script>

<style scoped>
    .detail_titie .anticon:hover{
        cursor: pointer;
        color: #1890ff;
    }
   .table_box .ant-col-6{
       border-style: solid;
       border-width: 0.2px;
       border-color: #ccc;
       height: 40px;
       text-align: center;

   }
    .modal_mailTable,.mailTable tr,.mailTable tr td{
        border:1px solid #E6EAEE;
    }
    .modal_mailTable{
        font-size: 12px; color: #71787E;
    }
    .modal_mailTable tr td{
        border:1px solid #E6EAEE; width: 150px; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 10px;
    }
    .modal_mailTable tr td.column {
        background-color: #EFF3F6; color: #393C3E;
        width: 30%;
    }


</style>
